<template>
  <div class="container">
    <div ref="mainRef" class="main"></div>
    <!-- <nvr-input ref="inputRef" /> -->
    <n-input ref="nInputRef" v-model="diyStore.creationData" :text-uid="diyStore.textSource" />
    <n-textarea ref="nTextareaRef" v-model="diyStore.creationData" :text-uid="diyStore.textSource" />
    <n-file ref="nFileRef" accept="image/*"></n-file>
    <n-file ref="nJsonFileRef" accept="application/json"></n-file>
  </div>
</template>

<script setup lang="ts">
import init from '@/utils/init'
import { ref, onMounted } from 'vue'
import NInput from '@/components/NInput/index.vue'
import NTextarea from '@/components/NTextarea/index.vue'
import NFile from '@/components/NFile/index.vue'
// import NvrInput from '@/components/NvrInput/index.vue'
import useMainStore from '@/store/modules/useMainStore'
import useDiyStore from '@/store/modules/useDiyStore'
import '@/utils/bundle'
import CardBook from './CardBook'
import Logo from './Logo'
import Card from './Card'

// import temp from './Temp'
const nInputRef = ref<InstanceType<typeof NInput> | null>(null)
const nTextareaRef = ref<InstanceType<typeof NTextarea> | null>(null)
const nFileRef = ref<InstanceType<typeof NFile> | null>(null)
const nJsonFileRef = ref<InstanceType<typeof NFile> | null>(null)
// const inputRef = ref<InstanceType<typeof NvrInput> | null>(null)
await init()
const mainStore = useMainStore()
const diyStore = useDiyStore()
const mainRef = ref<HTMLDivElement | null>(null)
const app = await mainStore.getApp()
onMounted(async () => {
  mainRef.value!.appendChild(app.canvas)
  await CardBook() // 绘制卡册
  await Logo() //绘制Logo
  await Card() // 绘制卡牌
  mainStore.setNInput(nInputRef.value!)
  mainStore.setNTextarea(nTextareaRef.value!)
  mainStore.setNFile(nFileRef.value!)
  mainStore.setNJsonFile(nJsonFileRef.value!)
  // await temp(app, inputRef.value!)
  // app!.stage.addChild(inputRef.value!.container)
})
</script>
